<template>
  <div class="main">
    <el-container>
      <el-header height="scrollerHeight">
        <el-row>
          <nav-menu :info="info"></nav-menu>
          <!-- <el-page-header content="首页"></el-page-header> -->
          <web-banner></web-banner>

          <!--首页轮播图-->
          <!-- <home-banner :banners="banners"></home-banner> -->
        </el-row>
        <el-row>
          <bread-crumb></bread-crumb>
        </el-row>
        <el-row> </el-row>
      </el-header>
      <el-main>
        <div class="container main">
          <el-row :gutter="30">
            <!--left-->
            <el-col :xs="0" :sm="5" :md="6" :lg="4" :xl="4">
              <el-row>
                <cate-menu></cate-menu>
              </el-row>
            </el-col>
            <!--middle-->
            <el-col :xs="24" :sm="14" :md="13" :lg="14" :xl="14"
              ><div>
                <video-list :videoList="videoList"></video-list>
                </div
            ></el-col>
            <!--right-->
            <el-col :xs="0" :sm="5" :md="5" :lg="6" :xl="6">
              <!--UserInfo-->
              <user-info :info="info"></user-info>
              <!--buttons-->
              <el-divider></el-divider>
              <el-row>
                <home-chart></home-chart>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-main>
      <el-footer>
        <!-- 通用页脚 -->
        <!-- <common-footer></common-footer> -->
        <info-footer></info-footer>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import HomeBanner from "./Component/Banner";
import VideoList from "./Component/VideoList";
// import CommonFooter from '@/components/CommonFooter'
import CommonFooter from "../../components/CommonFooter.vue";
import BreadCrumb from "../../components/BreadCrumb";
import { getBanner, getVideoList } from "@/api/getData.js";
import WebBanner from "../../components/WebBanner";
import NavMenu from "../../components/NavMenu";
import "element-ui/lib/theme-chalk/display.css";
import UserInfo from "./Component/UserInfo.vue";
import { getUserInfo } from "@/api/getData.js";
import CateMenu from "./Component/CateMenu.vue";
import InfoFooter from "../../components/InfoFooter.vue";
import HomeChart from "./Component/HomeChart.vue";

export default {
  //注册组件
  components: {
    HomeBanner,
    VideoList,
    CommonFooter,
    BreadCrumb,
    WebBanner,
    NavMenu,
    UserInfo,
    CateMenu,
    InfoFooter,
    HomeChart,
  },
  data() {
    return {
      banners: [],
      videoList: [],
      info: {},
    };
  },
  methods: {
    //获取轮播图数据
    async getBannerData() {
      try {
        const result = await getBanner(); //获取轮播图数据
        //这里的await是表示getBanner本来是个异步方法，而现在需要等待这个异步方法完成
        //假如存在await 那么外层声明里就需要添加async声明 不然拿不到数据
        if (result.data.code == 0) {
          //得到的结果会自动在外面包装一层data，所以中间要夹个data
          this.banners = result.data.data;
        }
      } catch (err) {
        console.log("err!:" + err);
      }
    },
    //获取视频列表
    async getVList() {
      try {
        const result = await getVideoList();
        if (result.data.code == 0) {
          this.videoList = result.data.data;
        }
      } catch (err) {
        console.log("err:" + err);
      }
    },
    //notice
    open1() {
      const h = this.$createElement;

      this.$notify({
        title: "标题名称",
        message: h(
          "i",
          { style: "color: teal" },
          "这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案"
        ),
      });
    },
    //getUserInfo
    async getInfo() {
      try {
        const result = await getUserInfo(this.getToken);
        this.info = result.data.data;
      } catch (error) {
        console.log("err!" + error);
      }
    },
  },
  mounted() {
    //页面渲染完成调用方法获取数据
    this.getBannerData();
    this.getVList();
    if (this.getToken) {
      console.log("aaa");
      this.getInfo();
    }
  },
  computed: {
    scrollerHeight: function () {
      return window.innerHeight - 46 - 50 + "px";
    },
    getToken() {
      return this.$store.state.token;
    },
  },
};
</script>

<style lang="scss" scoped>
// .flexbox{
//   position: flex;
// }
// .fixedbox{
// }
// .bottom{
//   top: 200px;
// }

.main {
  background-color: #f9f9f9;
  width: 100%;
}
.container {
  position: flex;
  align-content: center;
  width: 100%;
  padding: 0 25px;
  box-sizing: border-box;
  overflow: auto;
}
</style>